<template>
	<view class="stagepage">
		<view class="stage-box" v-for="(item,index) in stageList" :key="item.id">
			<staagecard :info="item" shrink @shrinkTypeChange="shrinkTypeChange" :shrinkType="item.shrinkType" :index="index" ></staagecard>
			<staagecard v-for="(it,idx) in sonstageList" :key="idx" :info="it" v-if="item.shrinkType"></staagecard>
			<view class="button" v-if="item.shrinkType && isScrollPage" @click="scrollpage">加载更多</view>
			
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import staagecard from '../card/stagecard.vue';
	export default {
		components:{
			staagecard
		},
		props:{
			info:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				apiinfo:{ 
					 currentPage:1,
					 id:null,
					 pageSize:15
				},
				isScrollPage:false, // 是否允许翻页
				stageList:[], // 阶段任务列表
				sonstageList:[], // 子阶段任务列表
			}
		},
		mounted() {
			this.projectPhaseList();
		},
		methods: {
			/**
			 * 滚动翻页
			 */
			scrollpage:function(){
				let apiinfo = this.apiinfo;
				apiinfo.currentPage += 1;
				this.apiinfo = apiinfo;
				this.projectPhaseDetail();
			},
			/**
			 * 项目阶段列表
			 */
			projectPhaseList:function(){
				api.projectPhaseList({id:this.info.id}).then(res=>{
					if(res.data.result.length > 0){
					for(let i = 0;i < res.data.result.length; i++){
						res.data.result[i].shrinkType = false;
					}
						res.data.result[0].shrinkType = true;
						this.apiinfo.id = res.data.result[0].id;
					}
					this.projectPhaseDetail();
					this.stageList = res.data.result;
				})
			},
			/**
			 * 项目阶段详情
			 */
			projectPhaseDetail:function(){
				let sonstageList = this.sonstageList;
				let apiinfo = this.apiinfo;
				api.projectPhaseDetail(apiinfo).then(res=>{
					if(res.data.result.pageTotal <= apiinfo.currentPage){
						this.isScrollPage = false;
					}else{
						this.isScrollPage = true;
					}
					sonstageList.push.apply(sonstageList,res.data.result.list);
					this.sonstageList = sonstageList;
				})
			},
			/**
			 * 收缩按钮触发事件
			 */
			async shrinkTypeChange(e){
				let stageList = this.stageList;
				
				if(stageList[e].shrinkType == false){
					stageList.forEach(res=>{
						res.shrinkType = false;
					})
					this.apiinfo.currentPage = 1;
					this.apiinfo.id = stageList[e].id;
					this.sonstageList = [];
					await this.projectPhaseDetail();
				}
				this.$set(this.stageList[e],'shrinkType',!stageList[e].shrinkType);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.stagepage{
		.stage-box{
			width: calc(100% - 40rpx);
			margin:20rpx;
			background-color: white;
		}
		.button{
			color:white;
			background-color: #409eff;
			text-align: center;
			line-height: 60rpx;
			margin: 0 10rpx;
			border-radius: 10rpx;
		}
	}
</style>
